import React from 'react';
import { inject, observer } from 'mobx-react';
import CreateElement from '../element';
import { Table, Space, Button, Row, Col, Tree, Input } from 'antd';
import {
  PlayCircleOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  DeleteOutlined,
  SaveOutlined,
  ExportOutlined,
  PlusSquareOutlined,
} from '@ant-design/icons';
import './index.less';

@inject('store')
@observer
class ToolBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: 0,
      selector: '',
      code: '',
      title: '',
      tests: [],
    };
  }
  save() {
    this.props.store.project.save();
  }
  export() {
    this.props.store.system.showCode = true;
  }
  run() {
    this.props.store.project.runTest();
  }
  moveElement(direction) {
    this.props.store.project.move(direction, 'event');
  }

  render() {
    const { active } = this.state;
    return (
      <div className="workspace-toolbar">
        <div className="item" onClick={this.showDrawer}>
          <PlusSquareOutlined />
          新增
        </div>
        <div className="item" onClick={() => this.save()}>
          <SaveOutlined />
          保存
        </div>
        <div className="item" onClick={() => this.export()}>
          <ExportOutlined />
          导出
        </div>
        <div className="item" onClick={() => this.run()}>
          <PlayCircleOutlined />
          执行
        </div>
        <div className="item" onClick={() => this.moveElement(-1)}>
          <ArrowUpOutlined />
          上移
        </div>
        <div className="item" onClick={() => this.moveElement(1)}>
          <ArrowDownOutlined />
          下移
        </div>
        <div className="item">
          <DeleteOutlined />
          删除
        </div>
      </div>
    );
  }
}

export default ToolBar;
